<template>
    <div>
        <h2>房号信息录入</h2>
        <table class="table table-bordered" border="1">
            <tr>
                <td align="right">房号名称:<span style="color: red;">*</span></td>
                <td>
                    <input type="text" v-model="info.orderName">
                </td>
            </tr>
            <tr>
                <td align="right">房型:<span style="color: red;">*</span></td>
                <td>
                    <select v-model="info.typeId">
                        <option value="">请选择</option>
                        <option v-for="item in xiainfo.list" :value="item.id">{{ item.typeName }}</option>
                    </select>
                </td>
            </tr>
            <tr>

                <td align="right">状态:</td>
                <td>
                    <input type="radio" v-model="info.state" :value=0>上架
                    <input type="radio" v-model="info.state" :value=1>下架
                </td>
            </tr>
            <tr>
                <td align="right">备注:</td>
                <td>
                    <textarea v-model="info.orderDesc" name="" id="" cols="23" rows="5"></textarea>
                </td>
            </tr>
            
            <tr>
                <td></td>
                <td>
                    <input type="button" value="录入房号信息" class="btn btn-success" @click="add">
                </td>
            </tr>
        </table>

    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';
import moment from 'moment';
import { useRoute, useRouter } from 'vue-router';
let route = useRoute();
let router = useRouter();

///////////////////////////////////////////////////////////////////////////////////////
onMounted(()=>{
    show();//显示下拉信息
})

//下拉列表显示信息
let xiainfo:any = reactive({
    list: [],
});
//下拉列表查询条件
let tiao:any=reactive({
    index:1,
    size:999,
    xiaosize:0,
    bigsize:0,
    typeName:''
})

let info = reactive({
   "orderName": "",
  "typeId": '',
  "state": 0,
  "orderDesc": ""
});



/////////////////////////////////函数/////////////////////////////////////////////////////



const add = () => {
    
    if (info.orderName == '') {
        alert('房号名称不能为空');
        return;
    }
    if (info.typeId == '') {
        alert('请选择所属房型');
        return;
    }
    axios({
        url: 'https://localhost:7080/api/RoomOrder/AddOrder',
        data: info,
        method: 'post'
    })
        .then(res => {
            if (res.data > 0) {
                alert('录入房号成功');
                router.push('/getRoomOrder')
            } else {
                alert('房号重复');
            }
        })
}

//显示下拉
const show=()=>{
    axios({
        url:'https://localhost:7080/api/RoomType/GetRoomType',
        params:tiao,
        method:'get'
    })
    .then(res=>{
        xiainfo.list=res.data.list;
    })
}


</script>

<style scoped></style>